<template>
  <el-dialog title="考勤详情" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false" :before-close="close">
    <el-card class="box-card">
      <el-form ref="RefForm" :model="formData" label-width="90px" status-icon>
        <div class="divForm">
          <el-form-item label="考勤方式">
            <el-input v-model="formData.attendanceType" :disabled="true" />
          </el-form-item>
          <el-form-item label="RFID卡号">
            <el-input v-model="formData.rfid" :disabled="true" />
          </el-form-item>
          <el-form-item label="门禁ID">
            <el-input v-model="formData.accessCardID" :disabled="true" />
          </el-form-item>
          <el-form-item label="考勤日期">
            <el-input v-model="formData.attendanceDate" :disabled="true" />
          </el-form-item>
        </div>
        <div class="divForm">
          <el-form-item label="员工姓名">
            <el-input v-model="formData.name" :disabled="true" />
          </el-form-item>
          <el-form-item v-if="formData.department" label="部门">
            <el-input v-model="formData.department.deptName" :disabled="true" />
          </el-form-item>
          <el-form-item v-if="formData.job" label="职位">
            <el-input v-model="formData.job.jobTitle" :disabled="true" />
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <ListTable ref="RefDetailsTableList" :page="false" :loading="tableLoading" :table-data="tableData" :table-col="tableCol" />
    <div class="list-table-pager">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        style="text-align: center"
        :current-page="pagerData.pageIndex"
        :total="pagerData.count"
        :page-size="pagerData.pageSize"
        :page-sizes="[10, 20, 30, 40, 50]"
        @current-change="pageChange"
        @size-change="pageSizeChange"
      />
    </div>
  </el-dialog>
</template>

<script>
import dialogEditMixin from '@/mixins/dialogEdit'
import listMixin from '@/mixins/list'
import { parseTime } from '@/utils'
export default {
  mixins: [dialogEditMixin, listMixin],
  data() {
    return {
      // 列表标头字段
      tableCol: [
        { type: 'index', label: '序号', width: '100px' },
        {
          label: '所在区域',
          formatter(row, col, cell) {
            if (row.baseStation && row.baseStation.area) {
              return row.baseStation.area ? row.baseStation.area.name : row.baseStation.name
            } else if (row.autoGate && row.autoGate.area) {
              return row.autoGate.area ? row.autoGate.area.name : row.autoGate.name
            }
          }
        },
        {
          prop: 'enterDeice',
          label: '进入区域读卡设备',
          formatter(row, col, cell) {
            if (row.baseStation) {
              return row.baseStation.name
            } else if (row.autoGate) {
              return row.autoGate.name
            }
          }
        },
        {
          prop: 'enterTime',
          label: '进入区域时间',
          formatter(row, col, cell) {
            return row.enterTime ? parseTime(new Date(row.enterTime).getTime()) : '————'
          }
        },
        // { prop: 'enterDeice', label: '进场读卡设备名称' },
        {
          prop: 'leaveTime',
          label: '离开区域时间',
          formatter(row, col, cell) {
            return row.leaveTime ? parseTime(new Date(row.leaveTime).getTime()) : '————'
          }
        },
        { prop: 'duration', label: '工时' }
        // {
        //   label: '工时',
        //   formatter(row, col, cell) {
        //     if (!row.enterTime && !row.leaveTime) {
        //       return '缺少进场时间和出场时间'
        //     }
        //     if (!row.enterTime) {
        //       return '缺少进场时间'
        //     }
        //     if (!row.leaveTime) {
        //       return '缺少出场时间'
        //     }
        //     const date1 = new Date(row.enterTime) // 开始时间
        //     const date2 = new Date(row.leaveTime) // 结束时间
        //     const date3 = date2.getTime() - new Date(date1).getTime() // 时间差的毫秒数

        //     // 计算出相差天数
        //     const days = Math.floor(date3 / (24.0 * 3600.0 * 1000.0))

        //     // 计算出小时数
        //     const leave1 = date3 % (24 * 3600 * 1000.0) // 计算天数后剩余的毫秒数
        //     const hours = Math.floor(leave1 / (3600 * 1000))

        //     // 计算相差分钟数
        //     const leave2 = leave1 % (3600 * 1000.0) // 计算小时数后剩余的毫秒数
        //     const minutes = Math.floor(leave2 / (60 * 1000.0))

        //     return (days ? days + '天 ' : '') + hours + '小时 ' + minutes + '分钟'
        //   }
        // }
      ],
      options: [],
      tableData: [],
      pagerData: {
        count: 0,
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    row: function (newValue) {
      this.formData = {
        attendanceType: newValue.attendanceType == 1 ? '门禁' : newValue.attendanceType == 2 ? '基站' : '门禁 + 基站',
        rfid: newValue.rfid,
        accessCardID: newValue.accessCardID,
        name: newValue.name,
        department: {
          deptName: newValue.departmentName ? newValue.departmentName : '无'
        },
        job: {
          jobTitle: newValue.jobName ? newValue.jobName : '无'
        },
        attendanceDate: parseTime(new Date(newValue.attendanceDate).getTime(), '{y}-{m}-{d}')
      }
    }
  },
  methods: {
    responseDataHandleProgram(value) {
      if (!value.data) {
        return
      }
      this.tableData = value.data.items
      this.pagerData.count = value.data.count
      this.pagerData.pageIndex = value.data.pageIndex
      this.pagerData.pageSize = value.data.pageSize
    },
    async pageChange(pageIndex) {
      this.pagerData.pageIndex = pageIndex
      await this.searchDataHandleProgram(this.objData)
    },
    pageSizeChange(pageSize) {
      this.pagerData.pageSize = pageSize
      this.searchDataHandleProgram(this.objData)
    },
    resetFormData() {
      this.formData = {
        attendanceType: '',
        rfid: '',
        accessCardID: '',
        name: '',
        department: {
          deptName: ''
        },
        job: {
          jobTitle: ''
        },
        attendanceDate: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .divForm {
    display: flex;
  }
  .list-table-pager {
    margin-bottom: 20px;
    ::v-deep.active {
      background-color: #254c99 !important;
      color: #fff;
    }

    .el-pagination {
      ::v-deep .el-pagination__sizes {
        .el-input.is-focus {
          .el-input__inner {
            border-color: #254c99;
          }
          .el-input__inner:hover {
            border-color: #254c99;
          }
        }
        .el-input {
          .el-input__inner:hover {
            border-color: #254c99;
          }
          .el-input__inner:focus {
            border-color: #254c99;
          }
        }
      }
      ::v-deep .el-pagination__jump {
        .el-input {
          .el-input__inner:focus {
            border-color: #254c99;
          }
        }
      }
    }
  }
</style>
